<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		<div class="index" @click="onIndex()" ><img class="logo" src="../../assets/logo3.jpg" ></div>

		<div class="main">
			<van-swipe class="banner"  :autoplay="3000" :show-indicators="false" >
				<van-swipe-item v-for="item in bannerImg">
					<img class="banner-img" :src="item.pic_addr" >
				</van-swipe-item>
			</van-swipe>

			<!-- <van-notice-bar @click="noticeOP()" class="Notice" scrollable  left-icon="volume-o" :text="notice[0].title"/> -->
			<div class="Notice" >
				<div class="iconfont">&#xe8c4;</div>

			  <van-swipe vertical class="li" autoplay="3000" :show-indicators="false" >
			    <van-swipe-item v-for="(item,index) in notice"  @click="noticeOP(item)">
					{{item.title}}
				</van-swipe-item>

			  </van-swipe>
			</div>



			<div class="b-list" @click="">
				<div class="th">
					<div class="t-l">{{$t('page.Trading')}}</div>
					<!-- <div class="center">Price</div> -->
					<!-- <div class="t-r">Increase today</div> -->
					<div class="t-r">{{$t('page.Price')}}</div>
				</div>

				<div class="li th" v-for="(item , i) in B_Data">
					<div class="t-l">
						<img class="icon" :src="item.pic">
						<span class="name">{{item.name}}</span>
					</div>
					<!-- <div class="center">{{item.price}}</div> -->
					<div class="t-r"
						:class="[item.price > q_data[i].price ? 'red' : '' , item.price < q_data[i].price ? 'lv' : ''] "
					>{{item.price}}</div>
				</div>
			</div>
		 <tabs-footer tab="Trading"></tabs-footer>
		</div>

		 <notice ref='notice'></notice>
	</div>
</template>

<script>
	import Notice  from "../../components/Notice.vue"
	import TabsFooter from '../../components/tabs/tabs-footer.vue'

	export default {
		name: "Trading",
		components: {TabsFooter,Notice},
		data() {
			return {
				timer:'',
				bannerImg:[],
				notice:'',
				B_Data:[],
				q_data:[]
			}
		},
		mounted(){

			this.Banner();
			this.BData()
			this.timer = setInterval(() => {
			  this.BData()
			}, 5000)

		},
		destroyed(){
			console.log("离开")
			clearTimeout(this.timer)
		},

		methods: {
			noticeOP(e){

				this.$refs.notice.show(e)
			},
			onIndex:function(){
				 this.$router.push({name:'index'})
			},
			async Banner(){
				const { err, res } = await this.$request.get("/chss/photo/banner_pics", {});
				 if (err === null) {
					this.bannerImg = res
				}
				this.Notice()
			},
			async Notice(){
				const { err, res } = await this.$request.get("/chss/notice", {});
				 if (err === null) {
					this.notice = res
				}
			},
			async BData(){
				const { err, res } = await this.$request.get("/chss/exchangeInfo/get_exchanges", {});
				 if (err === null) {
					if(this.q_data.length < 1){
						this.q_data =res;
						this.B_Data = res;
						return
					}
					this.q_data =this.B_Data;

					this.B_Data = res;
				}
			},



		}
	}
</script>

<style  lang="scss" scoped>
.logo{border-radius: 50%;}
	.main{
		padding: 0px;
		min-height:100%;
		position: relative;
		overflow: scroll;
	}

	.banner{width: 750px; height: 650px;}
	.banner-img{width: 100%; height:100%;}

	.Notice{
		background: #007AFF; color:#FFF;
		margin: 0px 30px; padding:0px 30px;
		height: 100px; border-radius: 50px; line-height: 100px;

		background: -moz-linear-gradient(to top right , #1368f8 , #5ef2ff);
		background:  -webkit-linear-gradient(to top right , #1368f8 , #5ef2ff);
		background: -o-linear-gradient(to top right , #1368f8 , #5ef2ff);
		background:  -ms-linear-gradient(to top right , #1368f8 , #5ef2ff);
		background:  linear-gradient(to top right , #1368f8 , #5ef2ff);

		display: flex;

		.iconfont{
			height: 100px; line-height: 100px;
			font-size: 40px; margin-right: 20px;
		}

		.li{
			flex:1;
			height: 100%; height: 100px; line-height: 100px; width: 100%;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
	}


	.b-list{

		padding:20px 30px ;


		.th{
			display: flex;
			font-size: 26px;padding: 20px 20px; color:#999;
			.t-l{text-align: left;flex:1;}
			.center{text-align: center;flex:1;overflow: hidden;}
			.t-r{text-align: right;flex:1;overflow: hidden;

				&.red{color: #f00;}
				&.lv{color: #0a941b;}
			}

		}

		.li{
			display: flex; justify-content:space-between;
			height: 120px; line-height: 120px; font-size: 25px;
			border-radius: 10px ; padding: 0px 30px;
			margin: 20px 0px; background:rgba(0, 122, 255, 0.7); color:#eee;


			.icon{
				height: 60px; width: 60px; background: #FFF; border-radius: 50%;
				margin: 30px 0;  float: left; display: inline-block;
			}
			.name{margin-left: 20px;}
			.price{float: right;}

			&.red{background-color: #f0d2d2; color:#F00}
			&.lv{background-color: #d0eec6; color:#0a941b}

		}

	}
</style>
